<template>
    <el-dialog title="计算游戏" v-model="mathGameDialog" width="500" :close-on-click-modal = false :before-close="stopgame">
    <div style="height: 500px;">
      <div class="firstbox">
        
        <p class="topic" v-text="topicText"></p>
        <el-input
          ref="inputRef "
          v-model="answer"
          v-if="topicText != ''"
          style="width: 240px; margin: 20px 40%"
          placeholder="请输入答案..."
          @keyup.enter="submit"
        />
        <p class="topic" v-if="topicText != ''">共得分：{{ score }}</p>
      </div>
      <div class="timetest" v-if="topicText != ''">
        <p>倒计时：{{ time }}</p>
      </div>
      <div class="action_style">
        <el-button @click="action" v-if="topicText != ''">重新开始</el-button>
        <el-button @click="action" v-else>开始游戏</el-button>
      </div>
      
    </div>
  </el-dialog>
</template>
<script setup lang="ts" >
import { ref, nextTick, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox, ElDialog } from "element-plus";
const router = useRouter();

const topicText = ref("");
const answer = ref();
const score = ref(0);
const inputRef = ref(null);
const a = ref(0);
const b = ref(0);
const mathGameDialog = ref(false);
let intervalId = ref();

const time = ref(5);

const action = () => {
  ElMessage({
    message: `游戏开始`,
    type: "success",
  });
  answer.value = "";
  score.value = 0;
  mathgame();
};

const mathgame = () => {
  clearInterval(intervalId.value);
  a.value = Math.floor(Math.random() * 100) + 1;
  b.value = Math.floor(Math.random() * 100) + 1;
  topicText.value = `${a.value} + ${b.value} =`;
  time.value = 5;
  intervalId.value = setInterval(() => {
    time.value--;

    // 当计时器的值为 0 或者达到某个条件时，停止计时器
    if (time.value < 0) {
      clearInterval(intervalId.value);
      ElMessageBox.confirm(`本题时间超时!本次共得分为${score.value}分`, {
        confirmButtonText: "重新开始",
        cancelButtonText: "结束游戏",
      })
        .then(() => {
          mathgame();
          score.value = 0;
          answer.value = "";
        })
        .catch(() => {
          // catch error
          topicText.value = "";
        });

      // 可以在这里添加更多的逻辑，例如重新开始游戏等
    }
  }, 1000);
};
const submit = () => {
  if (answer.value == "") {
    ElMessage({
      message: `请输入答案`,
      type: "warning",
    });
    return;
  }
  if (answer.value == a.value + b.value) {
    ElMessage({
      message: `恭喜你答对了!，加一分！`,
      type: "success",
    });
    // clearInterval(intervalId.value);
    score.value++;
    mathgame();
    answer.value = "";
  } else {
    clearInterval(intervalId.value);
    ElMessageBox.confirm(`答错了!本轮游戏共得分为${score.value}分`, {
      confirmButtonText: "重新开始",
      cancelButtonText: "结束游戏",
    })
      .then(() => {
        mathgame();
        score.value = 0;
        answer.value = "";
      })
      .catch(() => {
        // catch error
        topicText.value = "";
      });
  }
};

const stopgame = () => {
  clearInterval(intervalId.value);
  mathGameDialog.value = false
  emitCloseEvent(false)
  topicText.value = "";
};

// --------------------------------------弹窗控制--------------------------------------
const props = defineProps({
  mathGameDialog: {
    type: Boolean,
    default: false
  }
});

// 确保子组件能够响应 `mathGameDialog` 的变化
watch(() => props.mathGameDialog, (newValue) => {
    mathGameDialog.value = newValue;
});
const emitCloseEvent = (value:boolean) => {
  emit('update:mathGameDialog', value);
};
const emit = defineEmits(['update:mathGameDialog']);

</script>
<script lang="ts">
export default {
    name: "mathGame"
}

</script>
<style scoped>
.firstbox {
  /* border: 1px solid red; */
  width: 70%;
  height: 200px;
  margin: 10px auto;
  position: relative;

  .topic {
    text-align: center;
  }
}
.timetest {
  /* border: 1px solid red; */
  margin: 100px auto;
  width: 150px;
  /* height: 100px; */
  text-align: center;

  p {
    font-size: 18px;
  }
}
.action_style {
  position: absolute;
  left: 220px;
  bottom: 20px;
}
</style>